<template>
	<div class="second-kill">
		<div class="sk-header"
			:style="{backgroundImage: 'linear-gradient(to right, #12c2e9, #c471ed, #f64f59)',background: 'linear-gradient(to bottom,' + colorLeft + ',' + colorRight + ')' || 'rgba(255,0,0,1)'}"
		>
			<div class="com-header">
				<div class="back"
					onclick="javascript:history.go(-1)"
				>
					<i class="iconfont">&#xe697;</i>
				</div>
				<div class="content">
					秒杀专场
				</div>
			</div>
			<div class="sk-times"
				ref="times"
			>
				<ul class="skt-items"
					ref="timeWrapper"
				>
					<li class="skt-item"
						v-for="(item, index) in times"
						ref="time"
						@click="select(index)"
					>
						<p class="time">{{item.item}}</p>
						<p class="title">{{item.title}}</p>
					</li>
				</ul>
			</div>
		</div>
		<div class="station" id="station"></div>
		<Scroll :on-refresh="onRefresh"  
			:loadingText = "loadingText" 
			@topshow="topshow"
			:scrollNum="scrollNum"
			v-if="isLoadDom"
		>
			<swiper :options="swiperOption" 
				class="sk-goods" 
				ref="mySwiper"
				id="goods"
			>
				<swiper-slide class="skg-item"
					v-for="(item, index) in allList"
					:key="index"
				>
					<div class="content-slide">
						<GoodThree :goodsList=item></GoodThree>
					</div>
				</swiper-slide>
			</swiper>
		</Scroll>
		<GoTop :goTop="goTop"
            v-show="topclass"
        ></GoTop>
	</div>
</template>
<script>
import { Toast } from 'mint-ui'
import axios from 'axios'
import Http from '../http.js'
import GoodThree from '../components/goods_five'
import Scroll from '../components/my_scroll.vue'
import GoTop from '../components/GoTop.vue'
export default {
    data() {
      	return {
      		topclass: false,
      		scrollNum: 5, 
			loadingText: '加载中...',
      		colorLeft: window.localStorage.getItem("left"), 
			colorRight: window.localStorage.getItem("right"), 
			swiperOption: {
	          	pagination: {
	            	el: '.swiper-pagination',
	            	dynamicBullets: true
	          	},
		        initialSlide:this.currentIndex,
	          	on: {
		            slideChangeTransitionEnd: function(){
		                this.page = 2;
		                $(".sk-times .active").removeClass('active');
						$(".skt-item").eq(this.activeIndex).addClass('active');
						var c = this.activeIndex;
						if (c > 3) {
							$(".skt-items").css('marginLeft', -1.44*(c-2) + 'rem')
						}else{
							$(".skt-items").css('marginLeft', 0)
						}//切换结束时，告诉我现在是第几个slide
		            },
		        },
	        },
			times: [
				{
					"id": 1,
					"item": "00:00",
					"title": "昨日已开抢"
				},
				{
					"id": 2,
					"item": "10:00",
					"title": "昨日已开抢"
				},
				{
					"id": 3,
					"item": "12:00",
					"title": "昨日已开抢"
				},
				{
					"id": 4,
					"item": "15:00",
					"title": "昨日已开抢"
				},
				{
					"id": 5,
					"item": "20:00",
					"title": "昨日已开抢"
				},
				{
					"id": 6,
					"item": "00:00",
					"title": "即将开抢"
				},
				{
					"id": 7,
					"item": "10:00",
					"title": "即将开抢"
				},
				{
					"id": 8,
					"item": "12:00",
					"title": "即将开抢"
				},
				{
					"id": 9,
					"item": "15:00",
					"title": "即将开抢"
				},
				{
					"id": 10,
					"item": "20:00",
					"title": "即将开抢"
				},
				{
					"id": 11,
					"item": "00:00",
					"title": "明日开抢"
				},
				{
					"id": 12,
					"item": "10:00",
					"title": "明日开抢"
				},
				{
					"id": 13,
					"item": "12:00",
					"title": "明日开抢"
				},
				{
					"id": 14,
					"item": "15:00",
					"title": "明日开抢"
				},
				{
					"id": 15,
					"item": "20:00",
					"title": "明日开抢"
				},
			],
			page: 1,
			allList: [],
			hour_type: 1,
			currentIndex: 5,
			isLoadDom: false
      	}
    },
    components: {
		GoodThree,
		GoTop,
		Scroll
	},
	beforeMount(){
		this.getData();   	
		// this.getCate();   	
	},
	computed: {
	  	swiper () {
	    	return this.$refs.mySwiper.swiper
	  	}
	},
    mounted() {
		$(".skt-items").css('marginLeft', '-100%');		
		var t = new Date();
		var num = t.getHours();
		var time = num + ":00";
		var arry = [];
		for (var i = 0; i < this.times.length; i++) {
			arry.push(parseInt(this.times[i].item.substring(0,this.times[i].item.indexOf(":"))));
		}			
		var arr = arry.slice(5,10);
		var n = parseInt(num)
		if (arr.indexOf(n) > -1) {
			arr.push(n);
			function sortNumber(a, b){
				return a - b
			};
			arr = arr.sort(sortNumber);
			var m = arr.indexOf(n)
			var p = m+5;
			this.currentIndex = m+5;
			$(".skt-item").eq(this.currentIndex).addClass('active');
			this.times[m+5].title = "正在抢购中";
			for (var i = 0; i < m; i++ ){
				this.times[i+5].title = "已开抢";
			}			
		}else{
			arr.push(n);
			function sortNumber(a, b){
				return a - b
			};
			arr = arr.sort(sortNumber);
			var m = arr.indexOf(n)
			var p = m+4;
			this.currentIndex = p;
			this.times[p].title = "正在抢购中";
			for (var i = 0; i < m; i++ ){
				this.times[i+4].title = "已开抢";
			}
		}
    },
   	updated(){
   		this.isLoadDom = true;
		document.querySelector('.load-more').style.display = 'none';
   	},
    methods: {
    	topshow: function(a){
	    	this.topclass = a;
	    },
		onRefresh(done) {
			this.page = 1;
			this.hour_type = 1;
        	document.getElementById('help').style.display="none";
            this.getData()
            done();
            Toast({
			    message: '刷新完成',
			    position: 'bottom',
			    duration: 500
			});     
	    },
	    onInfinite(done) {
	    	document.getElementById('help').style.display="none";
	    	document.querySelector('.load-more').style.display = 'none';
	    },
	    goTop: function(){
            document.getElementById("goods").scrollIntoView()
        },
    	select: function(index){
    		this.page = 2;
			this.currentIndex = index;
			var ind = index + 1;
			$(".skt-item").removeClass('active');
			$(".skt-item").eq(index).addClass('active');
			if (index > 3) {
				$(".skt-items").css('marginLeft', -1.44*(index-2) + 'rem')
			}else{
				$(".skt-items").css('marginLeft', 0)
			}
			this.swiper.slideTo(index);
		},
   		getData(){
   			document.getElementById('help').style.display="none";  			
   			var self = this;
   			function getCate(){
   				var params = new URLSearchParams();
				params.append("page", self.page);
				params.append("hour_type", self.hour_type);
	        	axios.post(Http.FASEBUY, params).then( res => {
					var ret = res.data;
					self.allList.push(ret.data);
					if (self.hour_type < self.times.length) {
						self.hour_type ++;
						getCate()
					}else{
						self.swiper.slideTo(self.currentIndex);	
					}									
				})
   			}
   			getCate();
   		},
    },
}
</script>

<style lang="scss">
.second-kill{
	.sk-header{
		position: fixed;
		top: 0;
		left: 0;
		z-index: 2;
		height: 1.88rem;
		width: 100%;
		color: #fff;
		.com-header{
			width: 100%;
			background: none;
		}
		.sk-times{
			width: 100%;
			overflow-x: scroll;
			overflow-y: hidden;
			height: 1rem;
			color: #999;
			.skt-items{
				display: flex;
				align-items: center;
				height: 1rem;
				color: rgba(256,256,256,0.8);
				width: 300%;
				.skt-item{
					flex: 0 0 1.44rem;
					width: 1.44rem;
					padding: 0.2rem 0;
					&.active{
						background: linear-gradient(to bottom, rgba(256,256,256,0.1), rgba(256,256,256,0.4));
						color: #fff;
					}
					.title{
						font-size: 0.20rem;
					}
					.time{
						font-size: 0.28rem;
						margin-bottom: 0.06rem;
					}
				}
			}
		}
	}		
	.station{
		width: 100%;
		height: 1.88rem;
	}
	.sk-goods{
		background: #f1f7f8;
		width: 100%;
		.skg-item{
			background: #f1f7f8;
		}
	}
}
</style>
